<template>
    <!-- <div style="padding:20px">
        <el-button type="success">同意</el-button>
        <el-button type="danger">拒绝</el-button>
    </div> -->
    <el-table :data="appealData" style="width: 100%;height:700px">
        <el-table-column prop="appealUser.username" label="申请人" />
        <el-table-column prop="appealContent" label="申请内容" />
        <el-table-column prop="appealDateFormatted" label="申请时间" />
        <el-table-column prop="appealStatus" label="申请状态" />
        <el-table-column prop="appealCompletedDateFormatted" label="受理时间" />
        <el-table-column prop="appealReceipt" label="受理回执" />
        <el-table-column>
            <template #default="scope">
                <el-button type="primary" @click="appealDetail(scope.row)">查看详情</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog v-model="appealScopeDialogVisible" title="申请详情">
        <el-scrollbar height="400px">
            <el-form :model="appealRowData">
                <el-form-item label="申请人">
                    <p>{{ appealRowData.appealUser.username }}</p>
                </el-form-item>
                <el-form-item label="申请类型">
                    <p>{{ appealRowData.appealType }}</p>
                </el-form-item>
                <el-form-item label="申请目标">
                    <p>{{ appealRowData.appealObjName }}</p>
                </el-form-item>
                <el-form-item label="申请内容">
                    <p>{{ appealRowData.appealContent }}</p>
                </el-form-item>
                <el-form-item label="申请状态">
                    <el-radio-group v-model="appealRowData.appealStatus" v-if="editing"
                        type="textarea">
                        <el-radio label="正在受理">正在受理</el-radio>
                        <el-radio label="同意">同意</el-radio>
                        <el-radio label="拒绝">拒绝</el-radio>
                    </el-radio-group>
                    <p v-else>{{ appealRowData.appealStatus }}</p>
                </el-form-item>
                <el-form-item label="申请时间">
                    <p>{{ appealRowData.appealDateFormatted }}</p>
                </el-form-item>
                <el-form-item label="受理时间">
                    <p>{{ appealRowData.appealCompletedDateFormatted }}</p>
                </el-form-item>
                <el-form-item label="受理回执">
                    <el-input v-model="appealRowData.appealReceipt" :rows="2"
                        v-if="editing" type="textarea" />
                    <p v-else>{{ appealRowData.appealReceipt }}</p>
                </el-form-item>
            </el-form>
        </el-scrollbar>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="appealScopeDialogVisible = false">关闭</el-button>
                <el-button v-if="editing" type="primary" @click="scopeAppeal">
                    完成
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
export default {
    data() {
        return {
            appealData: [],
            editing:false,
            appealRowData: { appealUser: { username: '666' } },
            appealScopeDialogVisible: false
        }
    },
    created() {
        this.getAppealList()
    },
    methods: {
        appealDetail(appeal) {
            this.appealRowData = appeal
            this.appealScopeDialogVisible = true
            this.editing=appeal.appealStatus=='正在受理'?true:false
        },
        scopeAppeal() {
            this.$request.post('/appeal/appeal_scope', this.appealRowData).then(data => {
                this.$ElMessage({
                    message: data.success ? '操作成功' : '操作失败',
                    type: data.success ? 'success' : 'error',
                })
                if (data.success){
                    this.appealScopeDialogVisible = false
                    this.editing=false
                    this.getAppealList()
                } 
            })
            // console.log(this.appealRowData);
        },
        getAppealList() {
            this.$request.get('/appeal/appeal_list').then(data => {
                // console.log(data);
                this.appealData = data.data
            })
        }
    },
    watch:{
        appealData(){
            this.appealData.sort((appeal,appeal2)=>appeal2.appealDate-appeal.appealDate)
        }
    }
}
</script>

<style scoped>

</style>